
<template>
  <div id="app">
    <!--每一个案例都以文件夹为单位放在components中-->
    <!-- <h2>app.vue</h2> -->
    <!--1. 父传子-->
    <!-- <v-parent-to-child></v-parent-to-child> -->

    <!--//2. 父传子应用老师列表-->
    <!-- <v-parent-to-child-case></v-parent-to-child-case> -->

    <!-- 3. 父传子数据验证 -->
    <!-- <v-props-validate></v-props-validate> -->

    <!-- 4. 子传父 -->
    <!-- <v-child-to-parent></v-child-to-parent> -->

    <!-- 5. 子传父应用：经常应用于事件交互 -->
    <!-- <v-child-to-parent-case></v-child-to-parent-case> -->

    <!-- 6. 父子总结 -->
    <!-- <v-tip></v-tip> -->

    <!-- 7. ref -->
    <!-- <v-ref></v-ref> -->

    <!-- 8.作业 -->
    <v-home-work></v-home-work>


  </div>
</template>

<script>
//引入组件

//1. 父传子
import vParentToChild from "./components/01parentToChild/parent.vue";

//2. 父传子应用老师列表
import vParentToChildCase from "./components/02parentToChildCase/parent.vue";

// 3. 父传子数据验证
import vPropsValidate from './components/03propsValidate/parent.vue'

//4. 子传父
import vChildToParent from './components/04childToParent/parent.vue'

// 5. 子传父应用：经常应用于事件交互
import vChildToParentCase from './components/05childToParentCase'

// 6.  父子通信总结
import vTip from './components/06tips/parent.vue'

//7. ref
import vRef from './components/07ref/index.vue'

// 8. 练习
import vHomeWork from './components/08homework/index.vue'
export default {
  components: {
    vParentToChild,
    vParentToChildCase,
    vPropsValidate,
    vChildToParent,
    vChildToParentCase,
    vTip,
    vRef,
    vHomeWork
  },
};
</script>

<style>
/* .box {
  margin: 20px;
  border: 3px solid salmon;
} */
</style>
